<template>
  <div>
    <mobile-tear-sheet>
      <mu-list>
        <mu-sub-header inset>倒数纪念日</mu-sub-header>
        <mu-list-item title="清明节">
          <mu-avatar :src="tomSweepingDay" slot="leftAvatar"/>
          <span slot="right" color="pinkA200" :style="{'margin-left': '-88px'}" backgroundColor="transparent">倒数
          <mu-badge content="2" secondary slot="after"/>天
          </span>
          
        </mu-list-item>
        <mu-list-item title="劳动节">
          <mu-avatar :src="laborDay" slot="leftAvatar"/>
          <span slot="right" color="pinkA200" :style="{'margin-left': '-88px'}" backgroundColor="transparent">倒数
          <mu-badge content="33" secondary slot="after"/>天</span>
        </mu-list-item>
      </mu-list>
    </mobile-tear-sheet>
  </div>
</template>
<script type="text/javascript">
// import mobileTearSheet from '../components/mobileTearSheet'
import tomSweepingDay from '../assets/images/tomSweepingDay.jpg'
import laborDay from '../assets/images/laborDay.jpg'
	export default{
		data(){
            return {
            	tomSweepingDay,
            	laborDay
            }
		},
		// components: {
		// 	'mobile-tear-sheet': mobileTearSheet
		// }
	}
</script>